<!--表格组件 -->
<template>
  <section class="ces-table-page">
    <!-- {{ ce.a }} -->
    <!-- 表格操作按钮 -->
    <section class="ces-handle" v-if='isHandle'>
      <el-button v-for='(item, index) in tableHandles' :size="item.size || size" :type="item.type" :icon='item.icon'
        @click="item.handle()" :key="index">{{ item.label }}</el-button>
    </section>
    <!-- 数据表格 -->
    <section class="ces-table">
      <el-form ref="tableData" :model="tableData" :key="componentKey">
        <el-table class="table" :data='tableData' :border='isBorder' :row-class-name="tableRowClassName"
          @selection-change='SelectionChange' @select='select' @select-all='selectAll' @row-click='handrowclick'
          v-loading='loading' header-row-class-name="header_row_style" :defaultSelections='defaultSelections' ref="tab"
          :cell-style="tableCellStyle" :height="tableHeight"
          :style="{ height: tableData.length <= 5 && isHandle == true ? '350px' : '100%' }">
          <!-- :style="{ height: tableData.length <= 5 &&isHandle==true? '350px':'100%' }" -->

          <el-table-column v-if="isSelection" type="selection" align="center" width="50"></el-table-column>
          <el-table-column v-if="isIndex" type="index" :label="indexLabel" align="center" width="50"></el-table-column>
          <el-table-column v-if="IsfunEdit == true || Isfunfail == true" align="center"
            :width="btnName1 != '' ? 150 : 120" label="操作">
            <template slot-scope="scope">


              <el-button type="primary" size="mini" :width=40 v-if="IsfunEdit == true && btnName1 != ''"
                @click="handleEdit(scope, btnName1)">{{ btnName1 }}</el-button>


              <el-button type="primary" size="mini" :width=40 v-if="IsfunEdit == true && btnName2 != ''"
                @click="handleEdit(scope, btnName2)">{{ btnName2 }}</el-button>

              <el-button type="primary" size="mini" :width=40 v-if="IsfunEdit == true && btnName3 != ''"
                @click="handleEdit(scope, btnName3)">{{ btnName3 }}</el-button>
              <el-button type="primary" size="mini" icon="el-icon-edit" :width=50 v-if="IsfunEdit == true"
                @click="handleEdit(scope)"></el-button>

              <el-button type="danger" size="mini" icon="el-icon-delete" :width=50 v-if="Isfunfail == true"
                @click="handleDelete(scope)"></el-button>

            </template>

          </el-table-column>
          <!-- 数据栏 -->
          <el-table-column v-for="item in tableCols" :key="item.id" :prop="item.prop" :label="item.label"
            :width="item.width" :align="item.align" show-overflow-tooltip
            :render-header="item.require ? renderHeader : null" style="height:5px" :row-style="iRowStyle">


            <template slot-scope="scope">


              <!--prop="'' + scope.$index + '.'+item.prop" -->
              <el-form-item :prop="'' + scope.$index + '.' + item.prop" :rules='item.rulesRowDate'  :style="{
                  height:
                    item.type == '26'
                      ? '120px'
                      : item.type == '6'
                      ? '50px'
                      : '11px',
                }">
                <!-- html -->
                <span v-if="item.type === 'Html' && isHandle" v-html="item.html(scope.row)"></span>
                <!-- 按钮 -->
                <span v-else-if="item.type === 'Button' && isHandle">
                  <el-button v-for="(btn, index)  in item.btnList"
                    :disabled="btn.isDisabled && btn.isDisabled(scope.row)" :type="btn.type" size="mini"
                    :icon="btn.icon" :key="index" @click="btn.handle(scope.row)">{{ btn.label
                    }}</el-button>
                </span>

                <!-- 输入框 -->
                <el-input v-show="true"
                  v-else-if="item.type == 'Input' && isHandle && item.IsWrite == '1' && item.WFStepSN.indexOf(StepSN) > -1"
                  v-model="scope.row[item.prop]" size="mini" :disabled="item.IsWrite == '0' ? true : false"
                  @keyup.native="handlechange(item.prop, scope.$index)"
                  @focus="item.focus && item.focus(scope.row)"></el-input>



                <el-input type="number"
                  v-else-if="item.type === 'number' && isHandle && item.WFStepSN.indexOf(StepSN) > -1"
                  v-model="scope.row[item.prop]" size="mini" :disabled="item.IsWrite == '0' ? true : false"
                  @focus="item.focus && item.focus(scope.row)"></el-input>
                <!-- 下拉框 -->
                <el-select v-else-if="item.type === 'Select'" v-model="scope.row[item.prop]" :min-width="item.width"
                  size="mini" :disabled="item.IsWrite == '0' || isHandle == false ? true : false"
                  @change='item.change && item.change(scope.row)'>
                  <el-option :label="ColsRow.label" :value="ColsRow.value"
                    v-for="ColsRow in item.ColsRowDate"></el-option>
                </el-select>



                <!-- 单选 -->
                <el-radio-group v-else-if="item.type == 'radio'" v-model="scope.row[item.prop]"
                  :style="'width:' + item.width + 'px'"
                  :disabled="item.IsWrite == '0' || isHandle == false ? true : false" size="mini">

                  <el-radio :label="ColsRow.value" v-model="scope.row[item.prop]" v-for="ColsRow in item.ColsRowDate">{{
      ColsRow.label }}</el-radio>

                </el-radio-group>

                <!-- 开窗 -->
                <el-input v-else-if="item.type == 'buttonopen' && isHandle && item.WFStepSN.indexOf(StepSN) > -1"
                  v-model="scope.row[item.prop]" :disabled="true" @change='item.change && item.change(scope.row)'
                  size="mini" :style="'width:' + item.width + 'px'">
                  <el-button size="mini" slot="append" icon="el-icon-search"
                    @click="handleOpen(item.prop, scope.$index)" :disabled="item.IsWrite == '0' ? true : false"
                    style="width:9px"></el-button>
                </el-input>



                <el-input-number v-else-if="item.type === 'int' && isHandle && item.WFStepSN.indexOf(StepSN) > -1"
                  v-model="scope.row[item.prop]" :disabled="item.IsWrite == '0' ? true : false"
                  @change='item.change && item.change(scope.row)' size="mini" />

                <el-date-picker v-else-if="item.type === 'datetime' && isHandle && item.WFStepSN.indexOf(StepSN) > -1"
                  v-model="scope.row[item.prop]" :disabled="item.IsWrite == '0' ? true : false" size="mini"
                  lass="date_picker" type="datetime" :picker-options="pickerOptions" value-format="yyyy-MM-dd" />
                  <v-Getupload v-else-if="item.type == '26'" :rno="item.prop"
                  :bill="scope.row[billIDName] + scope.row[IDName]"></v-Getupload>
                <v-Getupload v-else-if="item.type == '6'" uploadType="text" :rno="item.prop"
                  :bill="scope.row[billIDName] + scope.row[IDName]"></v-Getupload>
                <!-- 复选框 -->
                <el-checkbox-group size="mini"
                  v-else-if="item.type === 'Checkbox' && item.WFStepSN.indexOf(StepSN) > -1"
                  v-model="scope.row[item.prop]" :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
                  @change='item.change && item.change(scope.row)'>
                  <el-checkbox v-for="(ra, index) in item.checkboxs" :label="ra.value" :key="index">{{ ra.label
                    }}</el-checkbox>
                </el-checkbox-group>
                <!-- 评价 -->
                <el-rate size="mini" v-else-if="item.type === 'Rate' && item.WFStepSN.indexOf(StepSN) > -1"
                  v-model="scope.row[item.prop]" :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
                  @change='item.change && item.change(scope.row)'></el-rate>
                <!-- 开关 -->
                <el-switch size="mini" v-else-if="item.type === 'Switch' && item.WFStepSN.indexOf(StepSN) > -1"
                  v-model="scope.row[item.prop]" :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
                  @change='item.change && item.change(scope.row)'></el-switch>
                <!-- 图像 -->
                <img v-else-if="item.type === 'Image' && item.WFStepSN.indexOf(StepSN) > -1" :src="scope.row[item.prop]"
                  @click="item.handle && item.handle(scope.row)" />
                <!-- 滑块 -->
                <el-slider size="mini" v-else-if="item.type === 'Slider' && item.WFStepSN.indexOf(StepSN) > -1"
                  v-model="scope.row[item.prop]" :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
                  @change='item.change && item.change(scope.row)'></el-slider>
                <!-- 默认 -->
                <span v-else :style="item.itemStyle && item.itemStyle(scope.row)"
                  :class="item.itemClass && item.item.itemClass(scope.row)">{{ (item.formatter &&
      item.formatter(scope.row)) || scope.row[item.prop] }}</span>
              </el-form-item>
              <!--   </el-form> -->
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </section>
    <!-- 分页 -->
    <section class="ces-pagination" v-if='isSearch'>
      <el-pagination style='display: flex;justify-content: center;height: 100%;align-items: center;' background
        @current-change="handleCurrentChange" @size-change="handleSizeChange"
        layout="total,sizes ,prev, pager, next,jumper" :page-size="Search.pageSize" :page-sizes="pagesizes"
        :current-page="Search.page" :total="Search.total"></el-pagination>
    </section>
  </section>
</template>

<script>
import vGetupload from "../Common/Getupload";
export default {
  components: {
    vGetupload
  },
  props: {
    // 表格型号：mini,medium,mini
    // ce: { type: Object, default: {} },
    size: { type: String, default: 'medium' },
    height: { type: String, default: 'medium' },

    isBorder: { type: Boolean, default: true },
    loading: { type: Boolean, default: false },
    // 表格操作
    isHandle: { type: Boolean, default: false },

    isHandleEdit: { type: Boolean, default: false },

    tableHandles: { type: Array, default: () => [] },
    // 表格数据
    tableData: { type: Array, default: () => [] },
    // 表格列配置
    tableCols: { type: Array, default: () => [] },
    // 是否显示表格复选框
    isSelection: { type: Boolean, default: false },
    defaultSelections: { type: [Array, Object], default: () => null },
    // 是否显示表格索引
    isIndex: { type: Boolean, default: false },
    indexLabel: { type: String, default: '序号' },
    // 是否显示分页
    isSearch: { type: Boolean, default: true },

    WFStepSN: { type: String, default: '' },


    StepSN: { type: String, default: '-1' },

    refs: { type: String, default: '-1' },

    pagesizes: { type: Array, default: [13, 50, 100, 200] },
    // 分页数据
    Search: { type: Object, default: () => ({ pageSize: 13, page: 1, total: 0 }) },

    //是否有编辑权限
    IsfunEdit: { type: Boolean, default: false },
    //是否有作废权限
    Isfunfail: { type: Boolean, default: false },
    //是否100%高度
    Isheight: { type: Boolean, default: true },

    tableHeight: { type: Number, default: 490 },
    time: { type: Number, default: 800 },
    billIDName: { type: String, default: "" }, //主键名称  用于上传附件用

    IDName: { type: String, default: "" }, //主键名称  用于上传附件用
    IsUseLockColumn: { type: Boolean, default: false },
    ToolBarheight: { type: Number, default: 200 },
    btnName1: { type: String, default: '' },
    btnName2: { type: String, default: '' },
    btnName3: { type: String, default: '' },
    flag: { type: Boolean, default: true },
    tip: { type: Boolean, default: false },
  },
  data() {
    return {
      lxrListRules: {
        Qty: [{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] }],
        Price: [{ required: true, message: '请输入性别', trigger: ['blur', 'change'] }]
      },
      wide: null,
      componentKey: 1


    }
  },
  mounted() {
    // if (this.flag) {
    setTimeout(() => {
      if (this.isHandle == false) {
        this.tableHeight = window.innerHeight - this.ToolBarheight
      }
      if (this.ToolBarheight != 200) {
        this.tableHeight = document.documentElement.clientHeight - this.ToolBarheight
      }
      // debugger
    });
    // let tab = document.querySelector('.table')
    setTimeout(() => {
      this.componentKey = this.componentKey + 1
      // tab.style.height = this.tableData.length <= 5 && this.isHandle == true ? '350px' : '90%'
      // if (this.tip) this.tableHeight = window.innerHeight - this.ToolBarheight 
    }, this.time);
    // let that = this
    // window.addEventListener('resize', function (event) {
    //   that.wide = document.documentElement.clientHeight
    // })
  },
  activated() {
  },

  watch: {
    // ce:{
    //   deep:true,
    //   // alert(1)
    //   handler(){
    //     setTimeout(() => this.ce.a = this.ce.a + 1, 2000)
    //   }
    // },
    'defaultSelections'(val) {
      this.$nextTick(function () {
        if (Array.isArray(val)) {
          val.forEach(row => {
            this.$refs.cesTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.cesTable.toggleRowSelection(val)
        }
      })
    },
    // tableData() {
    //   setTimeout(() =>this.componentKey = this.componentKey + 1,100)
    // }
  },

  methods: {

    toggleSelection(val) {


      if (Array.isArray(val)) {
        val.forEach(row => {
          this.$refs.cesTable.toggleRowSelection(row, true)
        })
      } else {
        this.$refs.cesTable.toggleRowSelection(val)
      }


    },
    // 表格勾选
    select(rows, row) {
      this.$emit('select', rows, row);
    },
    // 全选
    selectAll(rows, row) {

      self.selectList = rows


      row = rows[0];


      this.$emit('select', rows, row)
    },
    SelectionChange(val) {

      self.selectList = val
      this.$emit('SelectionChange', val);
    },
    // 
    handleCurrentChange(val) {
      this.Search.page = val;

      this.$emit('refresh');
    },
    handleSizeChange(val) {
      this.Search.pageSize = val;

      this.$emit('refresh');
    },

    handleEdit(scope, type) { // 修改
      this.$emit('handleEdit', scope, type);

    },

    handrowclick(scope) { // 修改


      this.$emit('handrowclick', scope);

    },



    handleDelete(scope) { // 修改



      this.$emit('handleDelete', scope);

    }, handleOpen(Name, index) { // 修改


      this.$emit('handleOpen', Name, index);

    },
    handlechange(Name, index) { // 修改


      this.$emit('handlechange', Name, index);

    },



    pickerOptions(val) {
    },
    tableCellStyle(e) {
      //this.$emit("tableCellStyle", {row, column, rowIndex, columnIndex});
      let obj = {};
      this.$emit("tableCellStyle", e, (color = {}) => {
        //将事件返回到调用组件的页面去判断 应该现实的颜色
        obj = color;
      });
      return obj;
    },
    // tableRowClassName({rowIndex}) {
    //     if (rowIndex % 2 === 0) {
    //         return "stripe-row";
    //     }
    //     return "";
    // }
    renderHeader(h, obj) {
      return h('span', { class: 'ces-table-require' }, obj.column.label)
    },
    iRowStyle: function ({ row, rowIndex }) {
      return 'height:5px';
    },

    validateForm() {
      let flag = null
      this.$refs["tableData"].validate(valid => {




        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    }

  },

  tableRowClassName({ row, rowIndex }) {
    let self = this
    for (let i = 0; i < self.selectList.length; i++) {
      if (rowIndex === self.selectList[i]) {
        return 'warning-row';
      }
    }

  },

  destroyed() {

    // debugger
    // alert(222222)

    // debugger
    // let that = this
    // window.addEventListener('resize', function (event) {
    //   that.wide = document.documentElement.clientHeight
    // })
  },
}
</script>
<style scoped lang="scss">
/* .table{
  /deep/ .el-table .cell{
    color: rgb(133, 91, 91);
  }
} */
/* 改 
.ces-table{
  /deep/ .el-table__body-wrapper{
    
  } 
}*/
.ces-table-require::before {
  content: '*';
  color: red;
}

.el-pagination {
  float: right;
  margin-right: 10px;
  margin-top: 5px;
}

.el-table th.gutter {
  display: table-cell !important;
}

.el-table {
  overflow-y: auto !important;
}

.el-table .warning-row {
  background: rgb(236, 56, 80) !important;
}
</style>